//创建class类
export {Big};
class Big {
    constructor(b) {
        this.ele = document.querySelector(b);
        this.show = this.ele.querySelector('.show');
        this.enlarge = this.ele.querySelector('.enlarge');
        this.mask = this.show.querySelector('.mask');
        this.pian = this.enlarge.firstElementChild;
        //可视图片的高和宽
        this.show_w = this.show.offsetWidth;
        console.log(this.show);
        this.show_h = this.show.offsetHeight;
        //可视图片里的遮盖层盒子的高和宽
        this.mask_w = parseInt(window.getComputedStyle(this.mask).width);
        this.mask_h = parseInt(window.getComputedStyle(this.mask).height);
        //大图的高和宽
        this.pian_w = parseInt(window.getComputedStyle(this.pian).width);
        this.pian_h = parseInt(window.getComputedStyle(this.pian).height);


        //调用方法
        this.setScale();
        this.overOut();
        this.move();
    }
    setScale() {
        console.log("计算比例");
        this.enlarge_w = this.mask_w * this.pian_w / this.show_w;
        this.enlarge_h = this.mask_h * this.pian_w / this.show_h;

        this.enlarge.style.width = this.enlarge_w + 'px';
        this.enlarge.style.height = this.enlarge_h + 'px';
    }

    overOut() {
        console.log('进入离开');
        this.show.addEventListener('mouseover', () => {
            this.mask.style.display = 'block';
            this.enlarge.style.display = 'block';
        })
        this.show.addEventListener('mouseout', () => {
            this.mask.style.display = 'none';
            this.enlarge.style.display = 'none';
        })
    }

    move() {
        console.log('移动联动');
        this.show.addEventListener('mousemove', e => {
            e = e || window.event;

            let x = e.offsetX - this.mask_w / 2;
            let y = e.offsetY - this.mask_h / 2;

            if (x < 0) x = 0;
            if (y < 0) y = 0;
            if (x > this.show_w - this.mask_w) x = this.show_w - this.mask_w
            if (y > this.show_h - this.mask_h) y = this.show_h - this.mask_h

            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'
            console.log(78);

            let picture_l = x * this.enlarge_w / this.mask_w;
            let picture_t = y * this.enlarge_w / this.mask_w;

            this.pian.style.left = -picture_l + 'px';
            this.pian.style.top = -picture_t + 'px';
        })
    }


}
// let a = new Big(".left")
// console.log(a);


